<script setup lang="ts">
import {reactive} from "vue";

const checkPwd = ((rule, value, callback) => {
    if (value.trim().length == 0) {
        callback(new Error("请输入确认密码"));
    } else if (value != this.form.newPassword) {
        callback(new Error("两次密码不一致"));
    } else {
        callback();
    }
})

const form = reactive({
    password: "cubaAdmin1234.",
    newPassword: "",
    newPassword2: "",
})

const rules = reactive({
    password: [
        {
            required: true,
            message: "请输入原密码",
            trigger: "blur",
        },
    ],
    newPassword: [
        {
            required: true, message: "请输入新密码", trigger: "blur"
        },
    ],
    newPassword2: [
        {
            validator: checkPwd,
            required: true,
            trigger: "blur",
        },
    ],
})

const sendData = () => {
    console.log("提交数据")
}
</script>

<template>
    <el-form

            :model="form"
            :rules="rules"
            :hide-required-asterisk="true"
            class="form-box u-font-16 u-flex"
            label-position="left"
    >
        <el-form-item label="原密码" class="u-flex" prop="password">
            <el-input v-model="form.password" placeholder="输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" class="u-flex" prop="newPassword">
            <el-input v-model="form.newPassword" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" class="u-flex" prop="newPassword2">
            <el-input
                    v-model="form.newPassword2"
                    placeholder="确认新密码"
            ></el-input>
        </el-form-item>
    </el-form>
    <el-button size="small" @click="sendData"> 确定修改</el-button>
</template>

<style scoped>

</style>
